<template>
    <div class="tmpl newsList">
        <h3>图文资讯</h3>
        <ul class="mui-table-view">
			<li v-for="item in list" class="mui-table-view-cell mui-media" :key="item.id">
				<router-link v-bind="{to:'/news/newsInfo/'+item.id}" >
					<img class="mui-media-object mui-pull-left" :src="item.img_url">
					<div class="mui-media-body">
						{{item.title}}
						<p class='mui-ellipsis' v-text="item.zhaiyao"></p>
						<div class="ft">
							<span>发表时间:{{item.add_time | datefmt('YYYY-MM-DD HH:mm:ss')}}</span>
							<span class="click">点击数：{{item.click}}</span>
						</div>
					</div>
				</router-link>
			</li>
		</ul>

    </div>
</template>
<script>
    import common from "../../../statics/js/common.js";
    export default{
        data(){
            return{
               list:[] 
            }
        },
        created(){
          this.getList(); 
        },
        methods:{
            getList(){
                var url = common.domain + '/api/getnewslist'
                this.$http.get(url).then(function(re){
                    if(re.body.status !=0 ){
                        Toast(re.body.message);
                        return;
                    }
                    this.list = re.body.message;
                })
            }
        }
    }
</script>
<style lang="scss" scoped>
    .newsList{
        h3{
            text-align: center;
            margin:10px auto;
            color:aqua;
            font-size:16px;
            font-weight: normal
        }
        .mui-table-view{
            img{
                width:80px;
                max-width: 100px;
                height:80px;
            }
            .mui-media-body{
                font-size: 14px;
            }
            .ft{
                margin-top: 1.5em;
                color:#0094ff;
                .click{
                    margin-left: 20px;
                }
            }
        }
    }
</style>

